<template>
  <a-drawer
    :title="title"
    :width="800"
    placement="right"
    :closable="false"
    @close="close"
    :visible="visible"
  >

    <a-spin :spinning="confirmLoading">
      <a-comment>
        <a slot="author">{{model.memberNickName}}</a>
        <a-avatar
          slot="avatar"
          :src="model.memberIcon"
          :alt="model.memberNickName"
        />
        <p slot="content">
          {{model.content}}

          <template v-for="(data,index) in dataSource">
            <div style="float: left;width:150px;height:150px;margin-right: 10px;margin: 0 8px 8px 0;" :key="index">
              <div
                style="width: 100%;height: 100%;position: relative;padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;">
                <img style="width: 100%;" :src="data" preview="index">
              </div>
            </div>
          </template>
        </p>

        <a-list
          v-if="replays.length"
          :dataSource="replays"
          itemLayout="horizontal"
        >
          <a-list-item slot="renderItem" slot-scope="item, index">
            <a-comment
              :author="item.memberNickName"
              :avatar="item.memberIcon"
              :content="item.content"
              :datetime="item.createTime"
            >
            </a-comment>
          </a-list-item>
        </a-list>
      </a-comment>

      <a-comment>
        <a-avatar
          slot="avatar"
          src="https://pic.flyco.net.cn/mall/newfeike.jpg"
          alt="飞科客服"
        />
        <div slot="content">
          <a-form :form="form">
            <a-form-item>
              <a-textarea :rows="4" @change="handleChange" :value="value"></a-textarea>
            </a-form-item>
            <a-form-item align="right">
              <a-button htmlType="submit" :loading="submitting" @click="handleSubmit" type="primary">
                回复
              </a-button>
            </a-form-item>
          </a-form>
        </div>
      </a-comment>

    </a-spin>
  </a-drawer>
</template>

<script>
  import { httpAction, getAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import moment from 'moment'

  export default {
    name: 'PmsCommentReplayModal',
    data() {
      return {
        title: '评论回复',
        visible: false,
        submitting: false,
        value: '',
        moment,
        model: {},
        replays: [],
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        dataSource: [],
        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules: {},
        url: {
          add: '/pms/pmsCommentReplay/add',
          edit: '/pms/pmsCommentReplay/edit',
          queryListByCommentId: '/pms/pmsCommentReplay/queryListByCommentId'
        }
      }
    },
    created() {
    },
    methods: {
      add() {
        this.edit({})
      },
      edit(record) {
        this.form.resetFields()
        this.model = Object.assign({}, record)
        this.visible = true

        if (this.model.pics != null && this.model.pics != '' && this.model.pics != undefined) {
          this.dataSource = this.model.pics.toString().split(',')
        } else {
          this.dataSource = []
        }

        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model, 'commentId', 'memberNickName', 'memberIcon', 'content', 'type'))
          //时间格式化
        })

        if (this.model.id) {
          console.log(this.model.id)
          this.loadReplayData();
        }
      },
      loadReplayData() {
        var params = { id: this.model.id }
        this.loading = true
        this.replays = []
        getAction(this.url.queryListByCommentId, params).then((res) => {
          if (res.success) {
            this.replays = res.result
            if (this.replays.length){
              this.value =  ''
            } else {
              this.value =  '最尊敬的用户您好：您的鼓励和支持，是我们飞科最好的前进动力。感谢您对飞科官网的支持！'
            }
          }
          this.loading = false
        })
      },
      handleChange(e) {
        this.value = e.target.value;
      },
      close() {
        this.$emit('close')
        this.visible = false
      },
      handleSubmit() {
        if (!this.value) {
          return;
        }
        this.submitting = true;
        let formData = {};
        formData.content = this.value;
        formData.commentId = this.model.id;
        //时间格式化
        httpAction(this.url.add,formData,'post').then((res)=>{
          if(res.success){
            this.$message.success(res.message);
            this.value = '';
            this.loadReplayData();
            this.$emit('ok');
          }else{
            this.$message.warning(res.message);
          }
        }).finally(() => {
          this.submitting = false;
        });
      },
      handleOk() {
        const that = this
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true
            let httpurl = ''
            let method = ''
            if (!this.model.id) {
              httpurl += this.url.add
              method = 'post'
            } else {
              httpurl += this.url.edit
              method = 'put'
            }
            let formData = Object.assign(this.model, values)
            //时间格式化

            console.log(formData)
            httpAction(httpurl, formData, method).then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            }).finally(() => {
              that.confirmLoading = false
              that.close()
            })
          }
        })
      },
      handleCancel() {
        this.close()
      }


    }
  }
</script>

<style lang="less" scoped>

</style>